<template>
  <div class="main-top">
       <div>主视图区域</div>
       <div class="main-top-right">
          <span @click="onGenerated">生成代码</span> 
          <span v-if="isbtn" @click="onRefer">查阅代码</span> 
          <span v-if="isbtn" @click="onCopy" ref="copyCode">复制代码</span> 
       </div>
  </div>
   <div  v-show="isView" class="code-style">code</div>
  <div>content</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const isView:any = ref(false);
    const copyCode:any = ref(null); //vue  3.0  获取dom
    const isbtn:any =ref(false);
    // 生成
    const onGenerated =()=>{
      isbtn.value = true;
    }
    // 查阅
    const onRefer =() =>{
      isView.value = !isView.value;
    }
    // 复制
    const onCopy =() =>{
      console.log('copyCode', copyCode);
      isView.value = false;
    }
    // 查阅代码
    return {
      isView,
      onGenerated,
      onRefer,
      onCopy,
      copyCode,
      isbtn
    }
  },
});
</script>
<style lang="scss" scoped>
.main-top{
  position: relative;
  display: flex;
  justify-content: space-between;
  .main-top-right{
    span{
      color: #e76040;
      cursor: pointer;
      padding: 0px 10px;
    }
  }
}
.code-style{
    position: absolute;
    width: 90%;
    height: 660px;
    background:  #555757;
    right: 0;
    color: #fff;
    z-index: 2;
}
</style>